<template>
  <div>
    <div class="title">
      <label style="color: #ffffff; font-size: 28px;">基金自选</label>
    </div>

    <el-table
        :data="myFunds"
        style="width: 100%"
        @row-click="openDetails">
      <el-table-column
          label="基金名称"
          width="280">
        <template slot-scope="scope">
          <div>{{ scope.row.fundName }}</div>
          <div>{{ scope.row.fundCode }}</div>
        </template>
      </el-table-column>

      <el-table-column
          label="净值"
          width="80">
        <template slot-scope="scope">
          <div>{{ scope.row.value }}</div>
          <div v-if="scope.row.rate < 0" style="color: #42b983">{{ scope.row.rate + ' %'}}</div>
          <div v-else-if="scope.row.rate === 0" style="color: black">{{ scope.row.rate + ' %'}}</div>
          <div v-else style="color: #ff4444">{{ scope.row.rate + ' %'}}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-link type="primary" class="el-button bottom-button" href="/search">添加自选</el-link>
  </div>

</template>


<script>
// import axios from "../../plugins/axiosConfig";
// import {loginUrl} from "../../utils/api"
// import qs from "qs"
import Cookies from 'js-cookie'
import axios from "../../plugins/axiosConfig";
import {myUrl} from "../../utils/api";

export default {
  data() {
    return {
      myFunds: [
        // {
        //   fundCode: '000001',
        //   fundName: '华夏牛逼',
        //   value: 1000,
        //   rate: -0.64
        // },
        // {
        //   fundCode: '000002',
        //   fundName: '你宁波牛逼',
        //   value: 10000,
        //   rate: +1.0
        // }
      ]
    }
  },
  methods: {
    //打开详情页弹窗
    openDetails(row) {
      console.log(row.fundCode);
      this.$router.push(`/detail/${row.fundCode}`)
    },
  },
  mounted() {
    console.log(Cookies.get('user'))
    axios.get(myUrl).then((res) => {
      if (res.status === 200) {
        this.myFunds = res.data.data;
      }
    })
  },
  name: 'my'
}
</script>

<style>
.title {
  height: 60px;
  width: 100%;
  line-height: 60px;
  background-color: cornflowerblue;
  align-content: center;
  margin: auto;
  text-align: center;
}

.bottom-button {
  margin-top: 20px;
}

</style>